<template>
  <div>
    <!-- //shape: 搜索框形状，可选值为 round  (shape:形状) -->
    <van-search
      shape="round"
      placeholder="请输入搜索关键词"
      show-action
      :clearable="false"
      v-model="value"
      @input="iptFn"
    />
    <!-- 搜索下容器 -->
    <div class="search_wrap" v-if="searchList.length === 0 || value==='' ">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span
          class="hot_item"
          v-for="(item,i) in hots" :key="i"
          @click="btnHot(item.first)"
          >{{ item.first }}</span
        >
      </div>
    </div>
    <!-- 搜索结果 -->
    
    <div class="search-res" v-else>
      <p class="text">最佳匹配</p>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >


        <SSongItem 
        v-for="obj in searchList"
        :key="obj.id"
        :name="obj.name"
        :author="obj.ar[0].name"
        :id="obj.id"
        ></SSongItem>

      </van-list>
    </div>
  </div>
</template>
<script>
  import { searchMusicApi } from '@/api';
  import { hotSearchApi } from '@/api';
import SSongItem from '../../components/sSongItem.vue';
export default {
    data() {
        return {
            hots: [],
            value: "",
            searchList: [],
            loading: false,
            finished: false,
            page: 1,
            timer: null
        };
    },
    async created() {
        const { data: { result: { hots } } } = await hotSearchApi();
        this.hots = hots;
    },
    methods: {
        async getSearchList() {
            return await searchMusicApi({
                keywords: this.value,
                limit: 20,
                offset: (this.page - 1) * 20, // 固定公式
            });
        },
        // 搜索热词
        async btnHot(value) {
            this.page = 1;
            this.finished = false; // 点击新关键词-可能有新的数据
            this.value = value;
            const { data: { result: { songs } } } = await this.getSearchList();
            console.log(songs);
            this.searchList = songs;
            this.loading = false; // 本次数据加载完毕-才能让list加载更多
        },
        async iptFn() {
            // 防抖
            if (this.timer)
                clearTimeout(this.timer);
            this.timer = setTimeout(async () => {
                this.finished = false; // 输入框关键字改变-可能有新数据(不一定加载完成了)
                if (this.value.length === 0) {
                    this.searchList = [];
                    this.page = 1;
                    return;
                }
                const res = await this.getSearchList();
                console.log(res);
                // 如果搜索结果响应数据没有songs字段-无数据
                if (res.data.result.songs === undefined) {
                    this.resultList = [];
                    return;
                }
                this.searchList = res.data.result.songs;
                this.loading = false;
            }, 900);
        },
        async onLoad() {
            // 触底事件(要加载下一页的数据咯), 内部会自动把loading改为true
            this.page++;
            const res = await this.getSearchList();
            if (res.data.result.songs === undefined) { // 没有更多数据了
                this.finished = true; // 全部加载完成(list不会在触发onload方法)
                this.loading = false; // 本次加载完成
                return;
            }
            this.searchList = [...this.searchList, ...res.data.result.songs];
            this.loading = false; // 数据加载完毕-保证下一次还能触发onload
        },
    },
    components: { SSongItem }
}
</script>

<style scoped lang="less">
  body{
    background-color: #fff;
  }
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

/* 给单元格设置底部边框 */
.van-cell {
  border-bottom: 1px solid lightgray;
  .iconPlay{
    font-size: .65rem;
  }
}
.search-res{
  .text{
    background-color: #fff;
    font-size: .4rem;
    color: #666;
    margin-left: .2667rem;
  }
}
</style>